<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="margin-bottom: 5px;">

  <!-- 示例-970 -->


</div>



<table class="layui-table" lay-data="{width: 2000, height:330, url: '/demo1mvc/xianServlet' , page:true, id:'idTest'}" lay-filter="demo">
  <thead>
  <tr>
    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
    <th lay-data="{field:'id', width:150, sort: true, fixed: true}">ID</th>
    <th lay-data="{field:'lamount', width:80}">金额</th>
<!--    <%&#45;&#45;        <th lay-data="{field:'togethernumber', width:80}">单号</th>&#45;&#45;%>-->
    <th lay-data="{field:'lname', width:150}">线路名</th>
    <th lay-data="{field:'lcategory', width:80}">几日游</th>
    <th lay-data="{field:'remark', width:80}">详情</th>

    <th lay-data="{fixed: 'right', width:500, align:'center', toolbar: '#barDemo'}"></th>
  </tr>
  </thead>
</table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update">增加</a>
</script>


<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
  layui.use('table', function(){
    var table = layui.table;
    //监听表格复选框选择
    table.on('checkbox(demo)', function(obj){
      console.log(obj)
    });
    //监听工具条
    table.on('tool(demo)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        layer.msg('ID：'+ data.id + ' 的查看操作');
      } else if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          obj.del();
          $.post('delServlet',{
            id:data.id
          },function (result) {
            if (result.code > 0) {
              layer.close(index);
              table.reload('idTest', {
                url: '/demo1mvc/jingServlet'
              })
            }
            if (result.code == 0) {
              alert("错误")
            }
          });


          layer.close(index);
        });
      } else if(obj.event === 'edit'){
        // layer.alert('编辑行：<br>'+ JSON.stringify(data))
        // $('#username').value(data.username);
        // $('#password').value(data.password);
        layer.open({
          title: '编辑'
          ,type: 1
          ,content: $('#formid'),
          btn: ['确定', '取消', ] //可以无限个按钮
          ,yes: function(index, layero){
            //按钮【按钮一】的回调
            //按钮【按钮一】的回调

            $.post("postServlet",{
              id:data.id,
              username:$('#username').val(),
              password:$('#password').val()
            }, function(result){
              $("span").html(result);

            });
            layer.close(index);  }

        });
      }

      else if(obj.event === 'update'){
        // layer.alert('编辑行：<br>'+ JSON.stringify(data))
        // $('#username').value(data.username);
        // $('#password').value(data.password);
        layer.open({
          title: '增加'
          ,type: 1
          ,content: $('#formid'),
          btn: ['确定', '取消', ] //可以无限个按钮
          ,yes: function(index, layero){
            //按钮【按钮一】的回调
            //按钮【按钮一】的回调

            $.post("updateServlet",{
              id:data.id,
              username:$('#username').val(),
              password:$('#password').val()
            }, function(result){
              $("span").html(result);

            });
            layer.close(index);  }

        });
      }



    });

    var $ = layui.$, active = {
      getCheckData: function(){ //获取选中数据
        var checkStatus = table.checkStatus('idTest')
                ,data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      }
      ,getCheckLength: function(){ //获取选中数目
        var checkStatus = table.checkStatus('idTest')
                ,data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      }
      ,isAll: function(){ //验证是否全选
        var checkStatus = table.checkStatus('idTest');
        layer.msg(checkStatus.isAll ? '全选': '未全选')
      }
    };

    $('.demoTable .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>

</body>
<form id="formid" class="layui-form" action="/postServlet" style="display: none">
  <div class="layui-form-item">
    <label class="layui-form-label">username</label>
    <div class="layui-input-block">
      <input type="text" id="username" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">password</label>
    <div class="layui-input-inline">
      <input type="password"id="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
</form>
</html>